<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="memberForm" class="demo-form-inline">
        <el-form-item label="昵称">
          <el-input v-model="memberForm.nickname" placeholder="请输入昵称" size="small"></el-input>
        </el-form-item>
        <!-- <el-form-item label="注册日期">
          <el-date-picker
            v-model="memberForm.creatDate"
            align="right"
            type="date"
            size="small"
            placeholder="请选择日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" size="small" @click="select">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="memberData" 
     ref="multipleTable" 
     style="width: 100%">
      <el-table-column type="selection" prop="id" width="55"></el-table-column>
      <el-table-column prop="memberName" label="会员名称" fixed="left"></el-table-column>
      <el-table-column prop="headPortrait" label="头像">
        <template slot-scope="scope">            
          <img :src="scope.row.headPortrait"  height="70" />
        </template>  
      </el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="150px"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="150px"></el-table-column>
      <el-table-column
        prop="gender.name"
        label="性别"
        :filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.gender.name === '男' ? 'success' : 'danger'"
            disable-transitions
          >{{scope.row.gender.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="会员等级"></el-table-column>
      <!-- <el-table-column prop="birth" label="出生日期"></el-table-column> -->
      <el-table-column prop="integral" label="积分"></el-table-column>
      <el-table-column prop="createDate" label="注册日期" width="160px"></el-table-column>
      <el-table-column label="操作" fixed="right" width="100px">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="keyword.currentPage"
      :page-size="keyword.pageSize"
      layout="total, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {getMemberPage,deleteMember} from "@/api/member.js"

export default {
  data() {
    return {
      head:"https://zpl-1303223223.cos.ap-beijing.myqcloud.com",
      memberData: [],
      memberForm: {},
      keyword: {
        currentPage: 1,
        pageSize: 3,
      },
      total: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  mounted(){
      this.show()
  },
  methods: {
    handleDelete(index,row){
        if(confirm("确定要删除次会员吗？")){
          deleteMember(row.id).then(res=>{
            if(res.data.code==="0000"){
            this.show();
        }
      })
        }
     
    },
    handleSizeChange(val) {
      this.keyword.pageSize=val;
            // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.keyword.currentPage=val;
      this.show(false);
            // console.log(`当前页: ${val}`);
    },
    show() {
      getMemberPage(this.keyword).then((res) => {
        if (res.data.code === "0000") {
          this.memberData = res.data.data.records;
          for(let i=0;i<this.memberData.length;i++){
            this.memberData[i].headPortrait=this.head+this.memberData[i].headPortrait;
          }
          this.total=res.data.data.total;
        }
      });
    },
    select(){
      this.keyword.nickname=this.memberForm.nickname;
      getMemberPage(this.keyword).then(res=>{
        if(res.data.code==="0000"){
          this.memberData=res.data.data.records;
          for(let i=0;i<this.memberData.length;i++){
            this.memberData[i].headPortrait=this.head+this.memberData[i].headPortrait;
          }
          this.total=res.data.data.total;
        }
      }
      )
    }
  },
};
</script>

<style scoped>
.top {
  margin-top: 10px;
}
</style>